<template>
  <div class="policy-page w">
    <el-card class="box-card" shadow="hover">
      <template #header>
        <el-page-header @back="router.back()">
          <template #title>
            <el-text size="large" tag="b">Policies</el-text>
          </template>
          <template #content>
            <el-text size="large" type="primary" tag="b">Cookie Policy</el-text>
          </template>
        </el-page-header>
      </template>

      <div class="policy-content">
        <div class="section-content">
          <el-alert type="info" :closable="false" show-icon title="Cookie Consent"
            description="We use cookies to enhance your browsing experience. By continuing to use our website, you agree to our use of cookies." />
        </div>

        <h2>1. What Are Cookies</h2>
        <div class="section-content">
          <el-card shadow="never" class="info-card">
            <template #header>
              <div class="card-header">
                <el-icon>
                  <InfoFilled />
                </el-icon>
                <h3>Understanding Cookies</h3>
              </div>
            </template>
            <div class="policy-text">
              Cookies are small text files that are placed on your device when you visit our website. They help us
              provide you
              with a better experience and allow certain features to work.
            </div>
            <el-image class="mt-3" style="width: 100%; max-width: 400px;"
              src="https://placehold.co/400x200?text=Cookie+Illustration" fit="cover" />
          </el-card>
        </div>

        <h2>2. Types of Cookies We Use</h2>
        <div class="section-content">
          <el-tabs>
            <el-tab-pane>
              <template #label>
                <el-icon>
                  <Key />
                </el-icon>
                <span>Essential</span>
              </template>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="Purpose">
                  Required for basic website functionality
                </el-descriptions-item>
                <el-descriptions-item label="Examples">
                  Session management, shopping cart, login status
                </el-descriptions-item>
                <el-descriptions-item label="Can be Disabled?">
                  <el-tag type="danger">No</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
            <el-tab-pane>
              <template #label>
                <el-icon>
                  <Operation />
                </el-icon>
                <span>Functional</span>
              </template>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="Purpose">
                  Enhance website functionality and personalization
                </el-descriptions-item>
                <el-descriptions-item label="Examples">
                  Language preferences, user settings
                </el-descriptions-item>
                <el-descriptions-item label="Can be Disabled?">
                  <el-tag type="warning">Yes</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
            <el-tab-pane>
              <template #label>
                <el-icon>
                  <DataLine />
                </el-icon>
                <span>Analytics</span>
              </template>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="Purpose">
                  Help us understand how visitors use our website
                </el-descriptions-item>
                <el-descriptions-item label="Examples">
                  Page views, navigation patterns
                </el-descriptions-item>
                <el-descriptions-item label="Can be Disabled?">
                  <el-tag type="success">Yes</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
          </el-tabs>
        </div>

        <h2>3. Managing Your Cookie Preferences</h2>
        <div class="section-content">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card shadow="hover" class="method-card">
                <template #header>
                  <div class="card-header">
                    <el-icon>
                      <Setting />
                    </el-icon>
                    <h3>Browser Settings</h3>
                  </div>
                </template>
                <ul class="browser-list">
                  <li>
                    <el-link type="primary" href="https://support.google.com/chrome/answer/95647" target="_blank">
                      Chrome
                      <el-icon class="el-icon--right">
                        <Link />
                      </el-icon>
                    </el-link>
                  </li>
                  <li>
                    <el-link type="primary"
                      href="https://support.mozilla.org/kb/enhanced-tracking-protection-firefox-desktop"
                      target="_blank">
                      Firefox
                      <el-icon class="el-icon--right">
                        <Link />
                      </el-icon>
                    </el-link>
                  </li>
                  <li>
                    <el-link type="primary" href="https://support.apple.com/guide/safari/manage-cookies-sfri11471"
                      target="_blank">
                      Safari
                      <el-icon class="el-icon--right">
                        <Link />
                      </el-icon>
                    </el-link>
                  </li>
                </ul>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card shadow="hover" class="method-card">
                <template #header>
                  <div class="card-header">
                    <el-icon>
                      <Warning />
                    </el-icon>
                    <h3>Important Note</h3>
                  </div>
                </template>
                <p class="policy-text">
                  Disabling certain cookies may affect the functionality of our website. Essential cookies cannot be
                  disabled
                  as they are necessary for basic website functions.
                </p>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-divider>Questions About Cookies?</el-divider>
        <div class="contact-section">
          <el-button type="primary" @click="router.push('/contact')" class="contact-button">
            <el-icon>
              <Message />
            </el-icon>
            Contact Our Privacy Team
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import {
  InfoFilled, Key, Operation, DataLine, Setting,
  Warning, Message, Link
} from '@element-plus/icons-vue'

const router = useRouter()
</script>

<style scoped>
.policy-page {
  padding: 20px 0;
  background-color: var(--el-bg-color-page);
}

.policy-content {
  padding: 20px 0;
}

.section-content {
  margin: 20px 0 40px;
}

h2 {
  color: var(--el-text-color-primary);
  margin-top: 30px;
}

h3 {
  margin: 0;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.policy-text {
  line-height: 1.8;
  margin: 10px 0;
  color: var(--el-text-color-regular);
}

.info-card {
  border: 1px solid var(--el-border-color-light);
}

.method-card {
  height: 100%;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-header .el-icon {
  color: var(--el-color-primary);
}

.browser-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.browser-list li {
  margin: 10px 0;
}

.mt-3 {
  margin-top: 12px;
}

.contact-section {
  text-align: center;
  margin-top: 40px;
}

.contact-button {
  min-width: 200px;
}

:deep(.el-page-header__title) {
  margin-right: 20px;
}

:deep(.el-tabs__item) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-tabs__item .el-icon) {
  margin: 0;
}
</style>